<template>
  <!-- 安全 -->
  <div class="case">
    <div class="case-left-side">
      <div class="case-txt">
        <el-form
          inline
          :model="form"
          ref="form"
          label-width="100px"
          size="mini"
        >
        <el-form-item label="">
          <el-select
            v-model="queryParams.type"
            placeholder="传感器类型"
            @clear="cleartype1"
            @change="changetype1"
            style="width: 130px;margin-right: 10px;"
          >
            <el-option
              v-for="dicts in types"
              :key="dicts.value"
              :label="dicts.lable"
              :value="dicts.value"
            />
          </el-select>
          <el-select
            v-model="queryParams.ssTransducerType"
            placeholder="请选择传感器类型"
            @clear="clearsducerCode1"
            @change="changes1"
            style="width: 170px"
          >
            <el-option
              v-for="dicts in typeList1"
              :key="dicts.ss_transducer_code"
              :label="dicts.ss_transducer_point"
              :value="dicts.ss_transducer_code"
            />
          </el-select>
        </el-form-item>
          <!-- <el-form-item label="" prop="psAreaName">
            <el-select
              v-model="form.psAreaName"
              placeholder="请选择分站"
              style="width: 150px"
            >
              <el-option label="请选择分站" value=""></el-option>
              <el-option
                v-for="item in psAreaNamelist"
                :key="item.ssStationCode"
                :label="item.ssStationName"
                :value="item.ssStationCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="psAreaType">
            <el-select
              v-model="form.psAreaType"
              placeholder="请选择或输入类型"
              style="width: 150px"
              filterable
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in psAreaTypelist"
                :key="item.inoutType"
                :label="item.name"
                :value="item.inoutType"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click="getRealtimelist"
          ></el-button>
        </el-form>
      </div>
      <div class="case-content" style="position: absolute; top: 70px">
        <happy-scroll color="rgba(0,0,0,0.5)" size="5">
          <div class="case-main">
            <div class="fuse-title">
              <img
                style="width: 0.4rem; margin-left: -0.2rem"
                src="../../../assets/images/img10.png"
                alt=""
              />
              <span style="vertical-align: text-bottom">实时监测</span
              ><i class="iconfont" @click="gettransList">&#xe66e;</i>
            </div>
            <div class="case-substance">
              <happy-scroll color="rgba(0,0,0,0.5)" size="5">
                <el-table :data="tableData" class="backtable" height="210">
                  <el-table-column label="序号" width="50" align="center">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{
                        scope.$index + 1
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerPoint"
                    label="监测点"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerValue"
                    label="实时监测值"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerStateName"
                    label="状态"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </happy-scroll>
            </div>
            <div class="fuse-title">
              <img
                style="width: 0.4rem; margin-left: -0.2rem"
                src="../../../assets/images/img10.png"
                alt=""
              />
              <span style="vertical-align: text-bottom">实时报警</span
              ><i class="iconfont" @click="getpersonList">&#xe66e;</i>
            </div>
            <div class="case-substance">
              <happy-scroll color="rgba(0,0,0,0.5)" size="5">
                <el-table :data="alarmData" class="backtable" height="210">
                  <el-table-column label="序号" width="50" align="center">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{
                        scope.$index + 1
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerPoint"
                    label="监测点"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerValue"
                    label="报警值"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssMaxValue"
                    label="最大值"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssAlarmStime"
                    label="时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </happy-scroll>
            </div>
            <div class="fuse-title">
              <img
                style="width: 0.4rem; margin-left: -0.2rem"
                src="../../../assets/images/img4.png"
                alt=""
              />
              <span style="vertical-align: text-bottom"
                >报警近七天变化趋势</span
              >
            </div>
            <div
              class="case-substance"
              id="dataseven"
              style="height: 230px; padding-top: 15px"
            >
              <!-- <echarts
                :chartData="echartData.polices"
                style="height: 230px; padding-top: 15px"
              ></echarts> -->
            </div>
          </div>
        </happy-scroll>
      </div>
    </div>
    <!-- <div class="case-middle-side"></div> -->
    <div class="case-middle-side">
      <ul class="case-census">
        <li style="cursor: pointer">
          <p>
            <span>分站信息：</span
            ><span>{{ this.CompositeData.alarmNum }}</span>
          </p>
          <ol>
            <li @click="lastDayAlarm">
              分站总数：<span>{{ this.CompositeData.stationTotalNum }}</span>
            </li>
          </ol>
        </li>
        <li @click="AIpoliceList" style="cursor: pointer">
          <!--  @click="open3" -->
          <p>
            <span>测点信息：</span>
          </p>
          <ol @click="cdpoliceList">
            <li>
              测点类型统计：<span>{{ this.CompositeData.cedianNum }}</span>
            </li>
          </ol>
        </li>
        <li style="cursor: pointer">
          <p>
            <span>甲烷传感器信息：</span
            ><span>{{ this.CompositeData.realPsAlarmNum }}</span>
          </p>
          <ol>
            <li @click="lastDayPsAlarm">
              甲烷传感器总数：<span>{{
                this.CompositeData.wasiTransducerNum
              }}</span>
            </li>
          </ol>
        </li>
        <li style="cursor: pointer;">
          <p>
            <span>断电实验统计：</span
            ><span>{{ this.CompositeData.clAlarmNum }}</span>
          </p>
          <ol>
            <li @click="PowerOutage">
              断电实验总数：<span>{{ this.CompositeData.duandianNum }}</span>
            </li>
          </ol>
        </li>
        <li style="cursor: pointer">
          <p>
            <span>超限统计：</span><span><span>无数据</span></span>
          </p>
          <ol @click="cxDayPsAlarm">
            <li>
              超限总次数：<span>{{ this.CompositeData.overSizeNum }}</span>
            </li>
          </ol>
        </li>
      </ul>
    </div>
    <div class="case-right-side">
      <happy-scroll color="rgba(0,0,0,0.5)" size="5">
        <div>
          <el-form
            inline
            :model="Associatform"
            ref="Associatform"
            label-width="100px"
            size="mini"
          >
            <el-form-item label="" prop="psAreaName">
              <!--  @change="getAstypeList" -->
              <el-select
                v-model="Associatform.psAreaName"
                placeholder="请选择分站"
                style="width: 320px"
                @change="getareaCodelist"
              >
                <el-option label="请选择分站" value=""></el-option>
                <el-option
                  v-for="item in AsAreaNamelist"
                  :key="item.ssStationCode"
                  :value="item.ssStationCode"
                  :label="item.ssStationName"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="fuse-title">
            <img
              style="width: 0.4rem; margin-left: -0.2rem"
              src="../../../assets/images/img4.png"
              alt=""
            />
            <span style="vertical-align: text-bottom">报警分析</span>
            <!-- <i class="iconfont" @click="getsafeshow">&#xe66e;</i> -->
          </div>
          <el-form
            inline
            :model="Policeform"
            ref="Policeform"
            label-width="100px"
            size="mini"
            style="margin-top: 10px"
          >
            <el-form-item label="" prop="psAreaType">
              <el-select
                v-model="Policeform.psAreaType"
                placeholder="请选择或输入类型"
                style="width: 150px"
                filterable
                @change="getareaCodelist"
              >
                <!-- <el-option label="请选择类型" value=""></el-option> -->
                <el-option
                  v-for="item in psAreaTypelist"
                  :key="item.inoutType"
                  :label="item.name"
                  :value="item.inoutType"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="areaCode">
              <el-select
                v-model="Policeform.areaCode"
                placeholder="请选择或输入传感器"
                style="width: 150px"
                filterable
              >
                <el-option label="请选择传感器" value=""></el-option>
                <el-option
                  v-for="item in areaCodelist"
                  :key="item.id"
                  :label="item.ssTransducerPoint"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getalarmdetails"
            ></el-button>
            <echarts
              :chartData="echartData.Police"
              style="height: 2rem"
            ></echarts>
            <div class="fuse-title" style="margin-top: 10px">
              <img
                style="width: 0.4rem; margin-left: -0.2rem"
                src="../../../assets/images/img10.png"
                alt=""
              />
              <span style="vertical-align: text-bottom">安全报警监测统计</span>
            </div>
            <div class="case-substance" style="height: 1.5rem">
              <happy-scroll color="rgba(0,0,0,0.5)" size="5">
                <el-table :data="tableDatas" class="backtable" height="150">
                  <el-table-column
                    prop="ssTransducerTypeName"
                    label="传感器类型"
                    show-overflow-tooltip
                    width="90"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerCode"
                    label="传感器编号"
                    show-overflow-tooltip
                    width="90"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerPoint"
                    label="监测点"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssTransducerValue"
                    label="监测值"
                    show-overflow-tooltip
                    width="60"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="ssAlarmStime"
                    label="报警时间"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
              </happy-scroll>
            </div>
            <div class="fuse-title" style="margin-top: 10px">
              <img
                style="width: 0.4rem; margin-left: -0.2rem"
                src="../../../assets/images/img5.png"
                alt=""
              />
              <span style="vertical-align: text-bottom"
                >安全报警实时管理统计</span
              >
            </div>
            <div style="height: 2.2rem" id="bing"></div>
          </el-form>
        </div>
      </happy-scroll>
    </div>
    <el-dialog width="60%" title="安全环境" :visible.sync="transShow">
      <el-table :data="tableData" height="400px" class="backtable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="监测点"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValue"
          label="实时监测值"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="csDataTime" label="时间" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="ssTransducerStateName"
          label="状态"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="实时报警" :visible.sync="personShow">
      <el-table :data="alarmData" height="400px" class="backtable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="监测点"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValue"
          label="报警值"
          show-overflow-tooltip
          width="80px"
        >
          <template slot-scope="scope">
            {{ scope.row.ssTransducerValue }}{{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column
          prop="ssAlarmStime"
          label="报警时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssAlarmDuration"
          label="持续时长"
          show-overflow-tooltip
          width="100px"
        >
        </el-table-column>
        <el-table-column prop="ssMaxValue" label="最大值" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.ssMaxValue }}{{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column
          prop="ssMaxTime"
          label="最大值时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="ssMinValue" label="最小值" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.ssMinValue }}{{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column
          prop="ssMinTime"
          label="最小值时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="关联分析" :visible.sync="safeShow">
      <safe-detail :AsAreaNamelist="AsAreaNamelist"></safe-detail>
    </el-dialog>
    <el-dialog width="75%" title="分站信息详情" :visible.sync="policelistShow">
      <el-form inline :model="form" ref="form" label-width="100px" size="mini">
        <el-form-item label="" prop="psAreaName">
          <el-select
            v-model="form.stationCode"
            placeholder="请选择分站"
            style="width: 150px"
            clearable
            @change="lastDayAlarmlist(form.stationCode)"
          >
            <el-option
              v-for="item in psAreaNamedetaillist"
              :key="item.ssStationCode"
              :label="item.ssStationName"
              :value="item.ssStationCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="lastDayAlarmlist(form.stationCode)"
          >查询</el-button
        >
        <el-button type="primary" size="mini" @click="resetinfo"
          >重置</el-button
        >
      </el-form>
      <el-table :data="policeData" height="600px" class="backtable">
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssStationCode"
          label="分站编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssStationName"
          label="分站名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="transducerNum"
          label="传感器个数"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      width="75%"
      title="测点信息详情"
      :visible.sync="cdpolicelistShow"
    >
      <el-form inline :model="form" ref="form" label-width="100px" size="mini">
        <el-form-item label="">
          <!--  @change="lastDayAlarmlist(form.stationCode)" -->
          <el-select
            v-model="form.cgqtype"
            placeholder="请选择传感器类型"
            style="width: 150px;margin-right: 5px"
            @change="changetype"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in cgqtypelist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="form.ssTransducerType"
            placeholder="请选择传感器类型"
            @clear="clearsducerCode"
          >
            <el-option
              v-for="dicts in typeList"
              :key="dicts.ss_transducer_type"
              :label="dicts.ss_transducer_name"
              :value="dicts.ss_transducer_type"
            />
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="" prop="ssTransducerPoint">
            <el-input v-model="form.ssTransducerPoint" placeholder="请输入传感器位置" clearable></el-input>
          </el-form-item> -->
        <el-button type="primary" size="mini" @click="cdpolicesearchList(form)"
          >查询</el-button
        >
        <el-button type="primary" size="mini" @click="cdresetinfo"
          >重置</el-button
        >
      </el-form>
      <el-table :data="policeData2" height="600px" class="backtable">
        <el-table-column label="序号" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerCode"
          label="测点编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssStationCode"
          label="分站编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerName"
          label="传感器类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="传感器位置"
          width="350"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="上限报警门限" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              form.cgqtype == "1" ? scope.row.ssAnalogAlarmhigh : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="上限断电门限" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{
              form.cgqtype == "1" ? scope.row.ssAnalogPoffhigh : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssAlarmStime"
          label="测点数值单位"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              form.cgqtype == "1" ? scope.row.ssAnalogUnit : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="上传时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 甲烷传感器详情 -->
    <el-dialog
      width="75%"
      title="甲烷传感器详情"
      :visible.sync="personpoliceShow"
    >
      <el-form inline :model="form" ref="form" label-width="100px" size="mini">
        <el-form-item label="" prop="ssTransducerName">
          <el-input
            v-model="form.ssTransducerName"
            placeholder="请输入传感器名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="ssTransducerPoint"> </el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="lastDayPsAlarmsearch(form.ssTransducerName)"
          >查询</el-button
        >
        <el-button type="primary" size="mini" @click="jwresetinfo"
          >重置</el-button
        >
      </el-form>
      <el-table :data="policeData3" height="600px" class="backtable">
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerCode"
          label="传感器编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssStationName"
          label="分站名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="传感器名称"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 超限统计详情 -->
    <el-dialog
      width="75%"
      title="超限统计详情"
      :visible.sync="cxpersonpoliceShow"
    >
      <el-form inline :model="form" ref="form" label-width="100px" size="mini">
        <el-form-item label="" prop="psAreaName">
          <el-select
            v-model="form.ssTransducerType"
            placeholder="请选择传感器类型"
            style="width: 150px"
            clearable
            @change="lastDayAlarmlist(form.stationCode)"
          >
            <el-option
              v-for="item in cxcgqtypelist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="ssTransducerPoint"> </el-form-item>
        <el-button
          type="primary"
          size="mini"
          @click="cxDayPsAlarmsearch(form.ssTransducerType)"
          >查询</el-button
        >
        <el-button type="primary" size="mini" @click="cxresetinfo"
          >重置</el-button
        >
      </el-form>
      <el-table :data="policeData5" height="600px" class="backtable">
        <el-table-column label="序号" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerCode"
          label="传感器编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerName"
          label="传感器类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="传感器位置"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValue"
          label="监测值"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="csDataTime"
          label="数据时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog width="75%" title="断电实验统计" :visible.sync="PowerOutageShow">
      <el-form
        inline
        :model="Powerform"
        ref="Powerform"
        label-width="120px"
        size="mini"
      >
        <!-- <el-form-item label="" prop="startTime">
          <el-date-picker
            v-model="Powerform.startTime"
            type="date"
            placeholder="请选择开始时间"
            value-format="yyyy-MM-dd"
            :picker-options="startDatePicker"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="" prop="endTime">
          <el-date-picker
            v-model="Powerform.endTime"
            type="date"
            placeholder="请选择结束时间"
            value-format="yyyy-MM-dd"
            :picker-options="endDatePicker"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item label="" prop="status">
          <el-select v-model="Powerform.status" placeholder="请选择处理状态">
            <el-option label="未处理" value="0"></el-option>
            <el-option label="已处理" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" size="mini" @click="handleQuery"
          >查询</el-button
        >
        <el-button size="mini" type="primary" @click="resetForm('Powerform')"
          >重置</el-button
        >
      </el-form>
      <el-table height="510px" class="backtable" :data="PowertableData">
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssStationCode"
          label="分站编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerCode"
          label="传感器编码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="传感器监测地点"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerTypeName"
          label="传感器类型"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerName"
          label="传感器名称"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="ssAlarmStime"
          label="报警开始时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssAlarmEtime"
          label="报警结束时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
        prop="ssDealMeasure"
        label="处理措施"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="submitState"
        label="措施状态"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>
            {{ scope.row.submitState === 0 ? '未处理' : '已处理' }}</span
          ></template
        >
      </el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="config.page"
        :page-size="config.limit"
        layout="total,prev, pager, next, jumper"
        :total="total"
        class="pager"
      ></el-pagination>
      <p style="margin-top:20px;"></p>
    </el-dialog>
  </div>
</template>

<script>
// import { communal } from '@/api/common.js'
import { listInfo,listInfo1 } from "@/api/security/securerealtime";
import SafeDetail from "@/views/visualization/Safe/SafeDetail";
import Echarts from "@/components/Echarts";
import * as echarts from "echarts";
import { WebScoket } from "@/api/websocket.js";
import { HappyScroll } from "vue-happy-scroll";
import "vue-happy-scroll/docs/happy-scroll.css";
export default {
  mixins: [WebScoket],
  components: {
    Echarts,
    SafeDetail,
    HappyScroll
  },
  mounted: function() {
    this.webValue = "/net/websocket/safeAlarmResult/" + this.checkCode;
    this.initWebSocket();
    // this.startDatePicker = this.beginDate();
    // this.endDatePicker = this.processDate();
  },
  destroyed() {
    this.websock.close(); // 离开路由之后断开websocket连接
  },
  data() {
    return {
      iframemain: "传感器",
      config: {
        page: 1,
        limit: 10
      },
      total: 0,
      CompositeData: {
        classLeader: null,
        dutyLeader: null,
        personnum: null,
        alarmNum: null,
        lastDayAlarmNum: null,
        allAlarmNum: null,
        autoNum: null,
        lastDayAutoNum: null,
        allAutoNum: null,
        hdCount2: null,
        hdCount1: null,
        hdCountAll: null,
        aiTotal: null,
        aiYesterdayCount: null,
        aiNowCount: null,
        srCountAll: null,
        srCountLevel1: null,
        srCountLevel2: null,
        srCountLevel3: null,
        srCountLevel4: null,
        clAlarmNum: null,
        lastDayClAlarmNum: null,
        allClAlarmNum: null
      },
      policelistShow: false,
      cdpolicelistShow: false,
      personpoliceShow: false,
      cxpersonpoliceShow: false,
      form: {
        psAreaName: null,
        psAreaType: null,
        ssTransducerPoint: "",
        ssTransducerType: "",
        cgqtype: "1",
        transducerType: ""
      },
      Associatform: {
        psAreaName: ""
      },
      Policeform: {
        psAreaType: "",
        areaCode: ""
      },
      safelist: {
        endTime: "",
        psAreaCode: "-",
        startTime: "",
        transId: "14043102003000001000001"
      },
      airform: {
        desc: null
      },
      echartData: {
        Police: {
          xData: [],
          series: []
        },
        polices: {
          xData: [],
          series: []
        },
        Wind: {
          xData: [],
          series: []
        },
        Person: {
          xData: [],
          series: []
        }
      },
      areaCodelist: [],
      psAreaNamelist: [],
      psAreaNamedetaillist: [],
      psAreaTypelist: [],
      AsAreaNamelist: [],
      AsAreaTypelist: [],
      alarmData: [],
      phoneData: [],
      airData: [],
      tableDatas: [],
      equipmentData: [],
      transShow: false,
      personShow: false,
      safeShow: false,
      websocketData: [],
      policeData: [],
      policeData2: [],
      cgqlocationlist: [],
      //isTypesducerCode: true,
      cgqtypelist: [
        {
          label: "模拟量",
          value: "1"
        },
        {
          label: "开关量",
          value: "2"
        }
      ],
      typeList: [],
      cxcgqtypelist: [
        {
          label: "瓦斯",
          value: "M0101"
        },
        {
          label: "一氧化碳",
          value: "M0104"
        }
      ],
      cgqnamelist: [],
      policeData3: [],
      policeData5: [],
      PowerOutageShow: false,
      Powerform: {
        startTime: "2023-06-18",
        endTime: "2023-07-18",
        status: ""
      },
      PowertableData: [],
      // startDatePicker: null,
      // endDatePicker: null,
      loading: false,
      typevalue: "1",      
      types: [
        {
          lable: '模拟量',
          value: '1'
        },
        {
          lable: '开关量',
          value: '2'
        }
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        ssTransducerType: ''
      },
      typevalue1:'',
      typeList1:[]
    };
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
    }
  },
  methods: {
    cleartype1() {
      this.queryParams.ssTransducerType = ''
      this.isTypesducerCode = true
      this.queryParams.pageNum = 1
      this.getList()
    },
    clearsducerCode1() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    changes1() {
      this.getRealtimelist()
    },
    changetype1(e) {
      this.typevalue1 = e
      this.queryParams.ssTransducerType = ''
      this.getType1()
    },
    getType1() {
      var typevalue1 = {
        type: this.typevalue1
      }
      listInfo1(typevalue1).then(response => {
        console.log(218, response)
        if (response.code === 200) {
          this.typeList1 = response.data
        }
      })
    },
    handleQuery() {
      this.loadding = true;
      this.config.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields();
      }
      this.getList();
    },
    PowerOutage() {
      this.PowerOutageShow = true;
      this.getList();
    },
    // 获取当前时间，day为number，getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds);
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    getList() {
      this.loading = true;
      this.PowertableData = [];
      this.Powerform.startTime = this.getDay(-30);
      this.Powerform.endTime = this.getDay(0);
      this.$http
        .get(
          "/safe/warn/getAQYCList?pageNum=" +
            this.config.page +
            "&pageSize=" +
            this.config.limit +
            "&startTime=" +
            this.Powerform.startTime +
            "&endTime=" +
            this.Powerform.endTime +
            "&status=" +
            this.Powerform.status +
            "&isWasi=1"
        )
        .then(res => {
          if (res.code == 200) {
            this.loading = false;
            this.total = res.data.total;
            this.PowertableData = res.data.data;
          }
        });
    },
    handleSizeChange(limit) {
      this.config.limit = limit;
      this.getList();
    },
    handleCurrentChange(page) {
      this.config.page = page;
      this.getList();
    },
    getCompositeData() {
      this.$http.get("/safe/home").then(res => {
        if (res.code === 200) {
          // this.uuid = res.data.uuid;
          this.CompositeData = res.data;
        }
      });
    },
    // SafeRealAlarm() {
    //   this.policeData = [];
    //   this.policelistShow = true;
    //   this.$http
    //     .get(
    //       "/SafeRealAlarm/SafeRealAlarm/list?pageNum=1&pageSize=10000&type=2"
    //     )
    //     .then(res => {
    //       if (res.code === 200) {
    //         this.policeData = res.rows;
    //       }
    //     });
    // },
    // 分站信息
    lastDayAlarmlist(type) {
      this.$http
        .get(
          "/safe/stationDetailList?pageNum=1&pageSize=10000&stationCode=" + type
        )
        .then(res => {
          if (res.code === 200) {
            this.policeData = res.data;
          }
        });
    },
    resetinfo() {
      this.form.stationCode = "";
      this.lastDayAlarmlist(this.form.stationCode);
    },
    lastDayAlarm() {
      this.policeData = [];
      this.policelistShow = true;
      this.getpsAreaNamedetaillist();
      this.$http
        .get("/safe/stationDetailList?pageNum=1&pageSize=10000&type=1")
        .then(res => {
          if (res.code === 200) {
            this.policeData = res.data;
          }
        });
    },
    // 测点类型统计
    cdpolicesearchList(data) {
      this.$http
        .get(
          "/safe/pointDetailList?pageNum=1&pageSize=10000&transducerType=" +
            data.cgqtype +
            "&ssTransducerType=" +
            data.ssTransducerType
        )
        .then(res => {
          if (res.code === 200) {
            this.policeData2 = res.rows;
          }
        });
    },
    clearsducerCode() {
      this.cdpolicesearchList();
    },
    cdresetinfo() {
      this.form.cgqtype = "1";
      this.form.ssTransducerType = "";
      this.cdpolicesearchList(this.form);
      this.typevalue = '1'
      this.getType();
    },
    cdpoliceList() {
      this.cdpolicelistShow = true;
      this.getType();
      this.form.cgqtype = "1";
      this.form.ssTransducerType = "";
      this.typeList = [];
      this.policeData2 = [];
      this.$http
        .get(
          "/safe/pointDetailList?pageNum=1&pageSize=10000&transducerType=" +
            this.form.cgqtype +
            "&ssTransducerPoint=" +
            this.form.ssTransducerPoint
        )
        .then(res => {
          if (res.code === 200) {
            this.policeData2 = res.rows;
          }
        });
    },
    changetype(e) {
     // this.isTypesducerCode = false;
      this.typevalue = e;
      this.form.ssTransducerType = "";
      this.getType();
    },
    //  changes() {
    //   this.isTypesducerCode = false
    //   this.cdpolicesearchList()
    // },
    getType() {
      var typevalue = {
        type: this.typevalue
      };
      listInfo(typevalue).then(response => {
        if (response.code == 200) {
          this.typeList = response.data;
        }
      });
    },
    AIpoliceList() {
      // this.$message("暂未接入该系统");
      // this.AIpoliceShow = true
    },
    // personpolice() {
    //   this.personpoliceData = [];
    //   this.qiujiuData = [];
    //   this.personpoliceShow = true;
    //   this.$http.get("/home/staffAlarm").then(res => {
    //     if (res.code === 200) {
    //       this.personpoliceData = res.data.alarm;
    //       this.qiujiuData = res.data.help;
    //     }
    //   });
    // },
    // 甲烷传感器总数
    lastDayPsAlarmsearch(type) {
      this.$http
        .get(
          "/safe/wasiDetailList?pageNum=1&pageSize=10000&ssTransducerName=" +
            type
        )
        .then(res => {
          if (res.code == 200) {
            this.policeData3 = res.data;
          }
        });
    },
    jwresetinfo() {
      this.form.ssTransducerName = "";
      this.lastDayPsAlarmsearch(this.form.ssTransducerName);
    },
    lastDayPsAlarm() {
      this.policeData3 = [];
      this.qiujiuData = [];
      this.personpoliceShow = true;
      this.$http
        .get("/safe/wasiDetailList?pageNum=1&pageSize=10000&ssTransducerName=")
        .then(res => {
          if (res.code == 200) {
            this.policeData3 = res.data;
          }
        });
    },
    // 超限总次数
    cxDayPsAlarmsearch(type) {
      this.$http
        .get(
          "/safe/detailList?pageNum=1&pageSize=10000&ssTransducerType=" + type
        )
        .then(res => {
          if (res.code == 200) {
            this.policeData5 = res.rows;
          }
        });
    },
    cxresetinfo() {
      this.form.ssTransducerType = "M0101";
      this.cxDayPsAlarmsearch(this.form.ssTransducerType);
    },
    cxDayPsAlarm() {
      this.cxpersonpoliceShow = true;
      this.policeData5 = [];
      this.form.ssTransducerType = "M0101";
      this.$http
        .get(
          "/safe/detailList?pageNum=1&pageSize=10000&ssTransducerType=" +
            this.form.ssTransducerType
        )
        .then(res => {
          if (res.code == 200) {
            this.policeData5 = res.rows;
          }
        });
    },
    allPsAlarm() {
      this.personpoliceData = [];
      this.qiujiuData = [];
      this.personpoliceShow = true;
      this.$http
        .get("/home/staffHistoryAlarmByType?pageNum=1&pageSize=10000&type=2")
        .then(res => {
          if (res.code == 200) {
            this.personpoliceData = res.data.alarm;
            this.qiujiuData = res.data.help;
          }
        });
    },
    staffAlarm(type) {
      this.staffAlarmData = [];
      this.staffAlarmShow = true;
      this.$http.get("/home/staffAlarmByType?type=" + type).then(res => {
        if (res.code == 200) {
          this.staffAlarmData = res.data;
        }
      });
    },

    // 安全报警
    websocketonmessage(e) {
      // psAreaTypelist
      this.websocketData = JSON.parse(e.data);
      this.getdatalist();
    },
    getStationList() {
      this.$http.get("/safe/wasiStationList").then(res => {
        if (res.code === 200) {
          this.psAreaNamelist = res.data;
          this.AsAreaNamelist = res.data;
        }
      });
    },
    // 分站信息详情-名称列表
    getpsAreaNamedetaillist() {
      this.$http.get("/safe/stationNameList").then(res => {
        if (res.code === 200) {
          this.psAreaNamedetaillist = res.data;
        }
      });
    },
    getdatalist() {
      this.tableData = [];
      this.alarmData = [];
      this.phoneData = [];
      this.airData = [];
      const that = this;
      this.$http.get("/safe/home").then(res => {
        if (res.code === 200) {
          this.tableData = res.data.transList;
          this.alarmData = res.data.alarmList;
          this.tableDatas = res.data.alarmList;
          this.phoneData = res.data.phoneList;
          this.airData = res.data.broadcastsList;
          //this.psAreaNamelist = res.data.areaList
          //this.AsAreaNamelist = res.data.areaList
          this.psAreaTypelist = res.data.transOptions;
          // this.Associatform.psAreaName = this.AsAreaNamelist[0].psAreaCode
          // this.getAstypeList()
          this.getalarmdetails();
          // 近七天报警趋势
          const polices = [];
          // let Windlist2 = []
          // this.timer1 = setInterval(function() {
          var dataseven = echarts.init(document.getElementById("dataseven"));
          const color = ["#8B5CFF", "#00CA69"];
          const xAxisData = res.data.sevenDaysAlarm.time;
          const yAxisData1 = res.data.sevenDaysAlarm.CO;
          const yAxisData2 = res.data.sevenDaysAlarm.CH4;

          const hexToRgba = (hex, opacity) => {
            let rgbaColor = "";
            const reg = /^#[\da-f]{6}$/i;
            if (reg.test(hex)) {
              rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                "0x" + hex.slice(3, 5)
              )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
            }
            return rgbaColor;
          };

          var option5 = {
            backgroundColor: "#fff0",
            color: color,
            legend: {
              top: 0,
              textStyle: {
                color: "#4dc7f8"
              }
            },
            tooltip: {
              trigger: "axis",
              formatter: function(params) {
                let html = "";
                params.forEach(v => {
                  html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                              <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                                color[v.componentIndex]
                              };"></span>
                              ${v.seriesName}2020.${v.name}
                              <span style="color:${
                                color[v.componentIndex]
                              };font-weight:700;font-size: 18px;margin-left:5px">${
                    v.value
                  }</span>
                              次`;
                });
                return html;
              },
              // formatter: function(prams) {
              //   return (
              //     prams[0].name +
              //     '\n' +
              //     '\n' +
              //     '报警次数：' +
              //     prams[0].value +
              //     '个'
              //   )
              // },
              extraCssText:
                "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #4dc7f8;",
              axisPointer: {
                type: "shadow"
                // shadowStyle: {
                //   // color: '#ffffff',
                //   // shadowColor: 'rgba(225,225,225,1)',
                //   shadowBlur: 2
                // }
              }
            },
            grid: {
              top: "50px",
              // height: '70%',
              bottom: "10px",
              left: "15px",
              right: "30px",
              containLabel: true
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                  // formatter: '2020-{value}',
                  textStyle: {
                    color: "#4dc7f8"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#4dc7f840"
                  }
                },
                data: xAxisData
              }
            ],
            yAxis: [
              {
                type: "value",
                name: "",
                axisLabel: {
                  textStyle: {
                    color: "#4dc7f8"
                  }
                },
                nameTextStyle: {
                  color: "#4dc7f8",
                  fontSize: 12
                  // lineHeight: 40
                },
                // 分割线
                splitLine: {
                  lineStyle: {
                    type: "solid",
                    color: "#46b4e3"
                  }
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                }
              }
            ],
            series: [
              {
                // name: "2018",
                name: "CO报警次数",
                type: "line",
                smooth: true,
                symbolSize: 6,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[0],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[0], 0.5),
                    shadowOffsetY: 8
                  }
                },
                symbol: "circle", // 数据交叉点样式
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[0], 0.3)
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[0], 0.1)
                        }
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[0], 0.1),
                    shadowBlur: 10
                  }
                },
                data: yAxisData1
              },
              {
                name: "瓦斯报警次数",
                type: "line",
                smooth: true,
                symbolSize: 6,
                zlevel: 3,
                lineStyle: {
                  normal: {
                    color: color[1],
                    shadowBlur: 3,
                    shadowColor: hexToRgba(color[1], 0.5),
                    shadowOffsetY: 8
                  }
                },
                symbol: "circle", // 数据交叉点样式 (实心点)
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: hexToRgba(color[1], 0.3)
                        },
                        {
                          offset: 1,
                          color: hexToRgba(color[1], 0.1)
                        }
                      ],
                      false
                    ),
                    shadowColor: hexToRgba(color[1], 0.1),
                    shadowBlur: 10
                  }
                },
                data: yAxisData2
              }
            ]
          };

          dataseven.setOption(option5);
          // }, 1000)
          // 本煤矿报警实时管理统计
          var chart = echarts.init(document.getElementById("bing"));
          var img =
            "";
          var bings = [];
          var bings1 = [];
          var count = 0;
          res.data.realAlarmCount.forEach(item => {
            bings.push({
              name: item.ssTransducerType,
              value: item.num
            });
            bings1.push(item.ssTransducerType);
            count += item.num;
          });
          var trafficWay = bings;

          var data = [];
          var color1 = [
            "#00cfff",
            "#006ced",
            "#ffe000",
            "#ffa800",
            "#ff5b00",
            "#ff3000"
          ];
          for (var i = 0; i < trafficWay.length; i++) {
            data.push(
              {
                value: trafficWay[i].value,
                name: trafficWay[i].name,
                itemStyle: {
                  normal: {
                    borderWidth: 5,
                    shadowBlur: 20,
                    borderColor: color1[i],
                    shadowColor: color1[i]
                  }
                }
              },
              {
                value: 2,
                name: "",
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "rgba(0, 0, 0, 0)",
                    borderColor: "rgba(0, 0, 0, 0)",
                    borderWidth: 0
                  }
                }
              }
            );
          }
          var seriesOption = [
            {
              name: "",
              type: "pie",
              clockWise: false,
              radius: [65, 70],
              hoverAnimation: false,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: "outside",
                    color: "#ddd",
                    formatter: function(params) {
                      var percent = 0;
                      var total = 0;
                      for (var i = 0; i < trafficWay.length; i++) {
                        total += trafficWay[i].value;
                      }
                      percent = ((params.value / total) * 100).toFixed(0);
                      if (params.name !== "") {
                        return (
                          params.name +
                          "报警事件" +
                          "\n" +
                          "\n" +
                          "次数：" +
                          params.value +
                          "次"
                        );
                      } else {
                        return "";
                      }
                    }
                  },
                  labelLine: {
                    length: 20,
                    length2: 20,
                    show: true,
                    color: "#00f6ff"
                  }
                }
              },
              data: data
            }
          ];
          var option = {
            backgroundColor: "#0A2E5D00",
            color: color1,
            title: {
              text: "瓦斯事件",
              subtext: count + "次",
              top: "40%",
              textAlign: "center",
              left: "49%",
              textStyle: {
                color: "#00f6ff",
                fontSize: 16,
                fontWeight: "400"
              },
              subtextStyle: {
                color: "#00f6ff",
                fontSize: 16,
                fontWeight: "400"
              }
            },
            graphic: {
              elements: [
                {
                  type: "image",
                  z: 3,
                  style: {
                    image: img,
                    width: 100,
                    height: 100
                  },
                  left: "center",
                  top: "center",
                  position: [100, 100]
                }
              ]
            },
            tooltip: {
              show: false
            },
            legend: {
              icon: "circle",
              orient: "horizontal",
              x: "right",
              data: bings1,
              // left: 250,
              top: 10,
              align: "right",
              textStyle: {
                color: "#fff"
              },
              itemGap: 20
            },
            toolbox: {
              show: false
            },
            series: seriesOption
          };

          chart.setOption(option);
          // const Personlist = []
          // this.timer = se tInterval(function() {
          //   that.echartData.Person.xData.push(that.getDate())
          //   that.echartData.Person.series.shift()
          //   Personlist.push(JSON.stringify(res.data.personCount))
          //   that.echartData.Person.series.push({
          //     name: '人员数量分析',
          //     data: Personlist,
          //     type: 'line',
          //     symbol: 'none'
          //   })
          // }, 1000)
        }
      });
    },
    getRealtimelist() {
      this.$http
        .get(
          "/safe/new_safe_left?transducerType=" +
            this.queryParams.type +
            "&ssTransducerCode=" +
            this.queryParams.ssTransducerType
        )
        .then(res => {
          if (res.code == 200) {
            this.tableData = res.data.transList;
            this.alarmData = res.data.alarmList;
          }
        });
    },
    // getAstypeList() {
    //   this.Policeform.psAreaType = ''
    //   this.$http
    //     .get('/safe/showLeftTrans?areaCode=' + this.Associatform.psAreaName)
    //     .then(res => {
    //       res = res.data
    //       if (res.code == 200) {
    //         this.AsAreaTypelist = res.data
    //         this.Policeform.psAreaType = this.AsAreaTypelist[0].code
    //       }
    //     })
    // },
    getareaCodelist() {
      this.Policeform.areaCode = "";
      this.$http
        .get(
          "/safe/showTrans?stationCode=" +
            this.Associatform.psAreaName +
            "&transducerType=" +
            this.Policeform.psAreaType
        )
        .then(res => {
          if (res.code === 200) {
            this.areaCodelist = res.data;
          }
        });
    },
    getareaData() {
      this.$http
        .get("/staff/areaInfo/areaSelect?areaId=" + this.form.psAreaName)
        .then(res => {
          res = res.data;
          if (res.code === 200) {
            this.area.alarmNum = res.data.alarmNum;
            this.area.personNum = res.data.personNum;
            this.tableData = res.data.transList;
            this.personData = res.data.staffList;
            this.equipmentData = res.data.autoEquipments;
          }
        });
    },
    getsafeshow() {
      this.safeShow = true;
      this.getsafelist();
    },
    myDate(value) {
      var time = new Date(value);
      // var year = time.getFullYear()
      // var month = time.getMonth() + 1
      // var date = time.getDate()
      var hour = time.getHours();
      var minute = time.getMinutes();
      var second = time.getSeconds();
      // month = month < 10 ? '0' + month : month
      // date = date < 10 ? '0' + date : date
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      var times = hour + ":" + minute + ":" + second;
      return times;
    },
    getDate() {
      const year = new Date().getFullYear();
      const month =
        new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1;
      const date =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      const hh =
        new Date().getHours() < 10
          ? "0" + new Date().getHours()
          : new Date().getHours();
      const mm =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      const time =
        year + "-" + month + "-" + date + " " + hh + ":" + mm + ":" + ss;
      var times = "";
      if (time) {
        times = new Date(time).getTime() - 1800000;
      }
      return times;
    },
    getalarmdetails() {
      this.echartData.Police.xData = [];
      this.echartData.Police.series = [];
      this.$http
        .get(
          "/safe/rightDataList?inOutType=" +
            this.Policeform.psAreaType +
            "&transducerCode=" +
            this.Associatform.psAreaName +
            "&transducerName=" +
            this.Policeform.areaCode
        )
        .then(res => {
          // res = res.data
          if (res.code == 200 && res.data != null) {
            // const Alarmlist = []
            // const that = this
            // var times = ''
            // this.timer = setInterval(function() {
            //   times = that.myDate(that.getDate())
            //   that.echartData.Police.xData.push(times)
            //   that.echartData.Police.series.shift()
            //   Alarmlist.push(JSON.stringify(res.data.alarmList))
            //   that.echartData.Police.series.push({
            //     name: '报警分析',
            //     data: Alarmlist,
            //     type: 'line',
            //     symbol: 'none'
            //   })
            // }, 1000)
            this.echartData.Police.xData = res.data.timeList;
            this.echartData.Police.series.push({
              data: res.data.alarmList,
              type: "line",
              symbol: "none"
            });
          }
        });
    },
    gettransList() {
      this.transShow = true;
    },
    getpersonList() {
      this.personShow = true;
    }
    // beginDate() {
    //   const self = this;
    //   return {
    //     disabledDate(time) {
    //       if (self.Powerform.endTime) {
    //         return new Date(self.Powerform.endTime).getTime() < time.getTime();
    //       }
    //     }
    //   };
    // },
    // processDate() {
    //   const self = this;
    //   return {
    //     disabledDate(time) {
    //       if (self.Powerform.startTime) {
    //         return (
    //           new Date(self.Powerform.startTime).getTime() > time.getTime()
    //         );
    //       }
    //     }
    //   };
    // }
  },
  created() {
    this.$bus.$emit("Iframe", this.iframemain);
    this.getdatalist();
    this.getStationList();
    this.getCompositeData();
    this.$emit("Gisval", "jianKong");
  }
};
</script>

<style lang="scss">
.case-right-side {
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}
.el-textarea__inner {
  height: 120px;
  // background: #1c1a46;
  background-color: rgba(255, 255, 255, 0) !important;
  border: 1px solid rgba(60, 177, 195, 0.37);
}
</style>
<style lang="scss" scoped>
::v-deep .el-dialog {
  background: url("../../../assets/img/dialogback.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
.area_show {
  li {
    cursor: pointer;
  }
}
.fuse-title {
  position: relative;
  height: 0.4rem;
  line-height: 0.5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px;
  font-size: 0.2rem;
  letter-spacing: 1px;
  i {
    cursor: pointer;
    position: absolute;
    right: 0.3rem !important;
    top: 0rem !important;
    color: #8dc0ff;
  }
}
.case-census > li ol {
  margin-top: 0.15rem;
}
.el-select .el-input.is-focus .el-input__inner {
}
::v-deep .el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-input--mini .el-input__inner {
  border: 1px solid #074e83 !important;
  background: #06244ec9 !important;
  color: #ccc !important;
}
.el-select-dropdown__item {
  color: #fff !important;
}
::v-deep.el-select-dropdown__item.hover,
::v-deep.el-select-dropdown__item:hover {
  background-color: #1a4c99 !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border: 1px solid #074e83;
  background: #06244ec9 !important;
  color: #ccc;
}
::v-deep .el-pager li {
  background: rgba(0, 0, 0, 0);
}
::v-deep .el-pagination button:disabled {
  color: #c0c4cc;
  background-color: rgba(0, 0, 0, 0);
  cursor: not-allowed;
}
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination .btn-next {
  background-color: rgba(0, 0, 0, 0);
}
::v-deep .el-pagination {
  color: #fff;
}
</style>
